<template>
  <div class="container">
    <div class="videoPlay">
      <video
        id="HKvideo"
        class="video-js"
        style="margin-top: 100px; margin-left: -450px; width: 500px; height: 400px"
        controls
        autoplay
        autobuffer
        muted
        preload="auto"
      ></video>
    </div>
    <div>
      <el-button @click="HKtiming">校时</el-button>
      <el-button @click="HKwatermark">水印修改</el-button>
    </div>
    <!--方向控制开始-->
    <div>
      <el-button @click="HKptzUp" >上</el-button>
      <el-button @click="HKptzDown">下</el-button>
      <el-button @click="HKptzLeft">左</el-button>
      <el-button @click="HKptzRight">右</el-button>
      <el-button @click="HKptzLeftUp">左上</el-button>
      <el-button @click="HKptzLeftDown">左下</el-button>
      <el-button @click="HKptzRightUp">右上</el-button>
      <el-button @click="HKptzRightDown">右下</el-button>
    </div>
    <!--方向控制结束-->
<!--    <div>-->
<!--      <el-button @click="HKptzUpEnd">向上停</el-button>-->
<!--      <el-button @click="HKptzDownEnd">向下停</el-button>-->
<!--      <el-button @click="HKptzLeftEnd">向左停</el-button>-->
<!--      <el-button @click="HKptzRightEnd">向右停</el-button>-->
<!--      <el-button @click="HKptzLeftUpEnd">左上停</el-button>-->
<!--      <el-button @click="HKptzLeftDownEnd">左下停</el-button>-->
<!--      <el-button @click="HKptzRightUpEnd">右上停</el-button>-->
<!--      <el-button @click="HKptzRightDownEnd">右下停</el-button>-->
<!--    </div>-->
    <!--变倍变焦开始-->
    <div>
      <el-button @click="HKzoomAdd">变倍+</el-button>
      <el-button @click="HKzoomDec">变倍-</el-button>
      <el-button @click="HKfocusAdd">变焦+</el-button>
      <el-button @click="HKfocusDec">变焦-</el-button>
      <el-button @click="HKirisAdd">光圈+</el-button>
      <el-button @click="HKirisDec">光圈-</el-button>
    </div>
    <!--变倍变焦结束-->
<!--    <div>-->
<!--      <el-button @click="HKzoomAddEnd">变倍+停</el-button>-->
<!--      <el-button @click="HKzoomDecEnd">变倍-停</el-button>-->
<!--      <el-button @click="HKfocusAddEnd">变焦+停</el-button>-->
<!--      <el-button @click="HKfocusDecEnd">变焦-停</el-button>-->
<!--      <el-button @click="HKirisAddEnd">光圈+停</el-button>-->
<!--      <el-button @click="HKirisDecEnd">光圈-停</el-button>-->
<!--    </div>-->

    <div>
      <el-button @click="HKstartVideo">手动开始录视频</el-button>
      <el-button @click="HKendVideo">手动停止录视频</el-button>
      <el-button @click="HKpicture">拍照</el-button>
      <el-button @click="HKonline">在离线</el-button>
    </div>
  </div>
</template>

<script>
import {
  HKendVideo,
  HKfocusAdd,
  HKfocusAddEnd,
  HKfocusDec,
  HKfocusDecEnd,
  HKirisAdd,
  HKirisAddEnd,
  HKirisDec,
  HKirisDecEnd,
  HKonline,
  HKpicture,
  HKptzDown,
  HKptzDownEnd,
  HKptzLeft,
  HKptzLeftDown,
  HKptzLeftDownEnd,
  HKptzLeftEnd,
  HKptzLeftUp,
  HKptzLeftUpEnd,
  HKptzRight,
  HKptzRightDown,
  HKptzRightDownEnd,
  HKptzRightEnd,
  HKptzRightUp,
  HKptzRightUpEnd,
  HKptzUp,
  HKstartVideo,
  HKtiming,
  HKwatermark,
  HKzoomAdd,
  HKzoomAddEnd,
  HKzoomDec,
  HKzoomDecEnd
} from "@/api/nssc/hkvideo/video";

export default {
    name: "index1",
    data() {
      return {
        webRtcServer: null,
        // webRtcServer1: null,
        //用来测试视频传参
        queryparm: {
          valu: undefined,
          video_ip1: undefined,
          video_name1: undefined,
          video_pwd1: undefined,
          video_port1: undefined,
        },
      };
    },

    mounted() {
      // 初始化webrec服务
      // this.webRtcServer = new WebRtcStreamer("video", this.httpServer);
      //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
      this.webRtcServer = new WebRtcStreamer('HKvideo', location.protocol + '//127.0.0.1:8000')
      // this.webRtcServer1 = new WebRtcStreamer('video1', location.protocol + '//127.0.0.1:8000')

      this.webRtcServer.connect('rtsp://admin:nssc1234@192.168.1.64:554/h264/ch1/main/av_stream')
      // this.webRtcServer1.connect('rtsp://192.168.2.92:554/stream=0')
    },

    beforeDestroy() {
      this.webRtcServer.disconnect()
      this.webRtcServer = null
    },

    methods: {
      //校时
      HKtiming(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKtiming(this.queryparm).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },

      //水印
      HKwatermark(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        this.queryparm.valu="测试水印111";
        HKwatermark(this.queryparm).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },

      //手动录像开始
      HKstartVideo(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKstartVideo(this.queryparm).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },

      //手动录像停止
      HKendVideo(){
        HKendVideo().then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },
      //拍照
      HKpicture(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKpicture(this.queryparm).then(response => {
          if(typeof(response)!=null){
            this.$modal.msg(response.msg);
          }
        });
      },

      //在离线
      HKonline(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKonline(this.queryparm).then(response => {
          // if(typeof(response)!=null){
          //   this.$modal.msg(response.msg);
          // }
        });
      },

      //云台向上开始
      HKptzUp(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKptzUp(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      // HKptzUp:_.throttle(function(){
      //   if(this.mouseupTime - this.mousedownTime < 1050){
      //       this.queryparm.video_ip1="192.168.1.64";
      //       this.queryparm.video_name1="admin";
      //       this.queryparm.video_pwd1="nssc1234";
      //       this.queryparm.video_port1=8000;
      //       console.log("111111111111111111")
      //     HKptzUp(this.queryparm).then(response => {
      //       if (response.msg != null) {
      //         this.$modal.msg(response.msg);
      //       }else{
      //
      //       }
      //     });
      //   }
      // },1000),

      //云台向上停止
      // HKptzUpEnd(){
      //   HKptzUpEnd().then(response => {
      //     if(typeof(response)!=null){
      //       // this.$modal.msg(response.msg);
      //     }
      //   });
      // },
      // HKptzUp1(){
      //   this.mousedownTime = new Date().getTime()
      //   this.timer = setInterval(()=>{
      //     this.queryparm.video_ip1="192.168.1.64";
      //     this.queryparm.video_name1="admin";
      //     this.queryparm.video_pwd1="nssc1234";
      //     this.queryparm.video_port1=8000;
      //     HKptzUp1(this.queryparm).then(response => {
      //     });
      //   },500)
      // },
      // HKptzUpEnd1(){
      //   this.mouseupTime = new Date().getTime()
      //   clearInterval(this.timer)
      //   HKptzUpEnd1().then(response => {
      //   });
      // },

      //云台向下开始
      HKptzDown(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKptzDown(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向下停止
      HKptzDownEnd(){
        HKptzDownEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向左开始
      HKptzLeft(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKptzLeft(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向左停止
      HKptzLeftEnd(){
        HKptzLeftEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

    //云台向右开始
      HKptzRight(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKptzRight(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向右停止
      HKptzRightEnd(){
        HKptzRightEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向左上开始
      HKptzLeftUp(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKptzLeftUp(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向左上停止
      HKptzLeftUpEnd(){
        HKptzLeftUpEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },


      //云台向右上开始
      HKptzRightUp(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKptzRightUp(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向右上停止
      HKptzRightUpEnd(){
        HKptzRightUpEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向左下开始
      HKptzLeftDown(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKptzLeftDown(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向左下停止
      HKptzLeftDownEnd(){
        HKptzLeftDownEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向右下开始
      HKptzRightDown(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKptzRightDown(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台向右下停止
      HKptzRightDownEnd(){
        HKptzRightDownEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台变倍+ 开始
      HKzoomAdd(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKzoomAdd(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变倍+结束
      HKzoomAddEnd(){
        HKzoomAddEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变倍- 开始
      HKzoomDec(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKzoomDec(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变倍-结束
      HKzoomDecEnd(){
        HKzoomDecEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变焦+ 开始
      HKfocusAdd(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKfocusAdd(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变焦+结束
      HKfocusAddEnd(){
        HKfocusAddEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变焦- 开始
      HKfocusDec(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKfocusDec(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台变焦-结束
      HKfocusDecEnd(){
        HKfocusDecEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台光圈+ 开始
      HKirisAdd(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKirisAdd(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台光圈+结束
      HKirisAddEnd(){
        HKirisAddEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },

      //云台光圈-开始
      HKirisDec(){
        this.queryparm.video_ip1="192.168.1.64";
        this.queryparm.video_name1="admin";
        this.queryparm.video_pwd1="nssc1234";
        this.queryparm.video_port1=8000;
        HKirisDec(this.queryparm).then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
      //云台光圈-结束
      HKirisDecEnd(){
        HKirisDecEnd().then(response => {
          if(typeof(response)!=null){
            // this.$modal.msg(response.msg);
          }
        });
      },
    },
  };
</script>

<style>
  /*页面整块大背景色*/
  .main-container {
    background-color: rgb(1 5 43);
  }
  .videoPlay {
    width: 500px;
    height: 500px;
    margin: 15px auto;
  }
  .video-js {
    background-color: rgb(1 5 43);
    object-fit: fill;
  }
</style>
